<template>
  <div class="marks">
    <el-form ref="ruleForm" :model="formDate" size="mini" label-width="130px" label-position="right" :show-message="false" :validate-on-rule-change="false">
      <div v-for="(mark,index) in formDate.marks" :key="index" class="goodsList">
        <h2>
          <span>UPC：{{ mark.upc }}</span>
          <span>商品名称：{{ mark.skuName }}</span>
          <el-button v-if="!isDisabled && index == 0 && formDate.marks.length > 1" type="text" size="mini" @click="oneClick">一键应用到其他商品</el-button>
        </h2>
        <el-form-item
          v-if="mark.creationWay == 2 || mark.creationWay == 3"
          label="是否已寄样"
          :prop="`marks[${index}].postType`"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }"
        >
          <el-select v-model="formDate.marks[index].postType" :disabled="isDisabled" placeholder="请选择" clearable>
            <el-option
              v-for="item in formDate.marks[index].directImportFlag?postTypeDi:postType"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-popover placement="bottom" trigger="click">
            <postaddress />
            <i slot="reference" class="el-icon-question" />
          </el-popover>
        </el-form-item>

        <el-form-item
          v-if="formDate.marks[index].postType == 1"
          label="快递单号"
          :prop="`marks[${index}].expressNumber`"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }"
        >
          <el-input
            v-model="formDate.marks[index].expressNumber"
            :disabled="isDisabled"
            placeholder="请输入"
            clearable
          />
        </el-form-item>

        <el-form-item
          v-if="formDate.marks[index].postType"
          :label="formDate.marks[index].postType===3 ? '拍摄地址' : '寄样/送样地址'"
          :prop="`marks[${index}].addressId`"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }"
        >
          <el-select v-model="formDate.marks[index].addressId" :disabled="isDisabled" placeholder="请选择" clearable>
            <el-option
              v-for="item in formDate.marks[index].addressList"
              :key="item.id"
              :label="item.mailAddress"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="!formDate.marks[index].pbVendorFlag && !formDate.marks[index].directImportFlag && formDate.marks[index].buildVendorNbr!=='382575'"
          label="是否已付款"
          :prop="`marks[${index}].payedFlag`"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }"
        >
          <el-select v-model="formDate.marks[index].payedFlag" :disabled="isDisabled" placeholder="请选择" clearable>
            <el-option
              v-for="item in payedFlag"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          v-if="formDate.marks[index].postType==1"
          class="photo"
          label="上传寄样凭证"
          :prop="`marks[${index}].postalVoucherUrl`"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }"
        >
          <div class="uploadPhoto">
            <div v-for="img in formDate.marks[index].postalVoucherUrl" :key="img.resourceUrl" class="elImg">
              <el-image :src="img.resourceUrl | transImgUrl" :preview-src-list="formDate.marks[index].postalVoucherUrl | transUrlName" />
              <div v-if="!isDisabled" class="del" @click="deletePhoto(img,formDate.marks[index].postalVoucherUrl)">
                <i class="el-icon-delete" />
              </div>
            </div>
            <div v-if="formDate.marks[index].postalVoucherUrl.length == 0 && isDisabled" class="tips">暂未上传凭证图片</div>
            <el-upload
              v-if="!isDisabled"
              :on-change="(file,fileList)=>{
                handleOnChange(file,formDate.marks[index].postalVoucherUrl,formDate.marks[index].id,1)
              }"
              :auto-upload="false"
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              accept=".png,.jpg,.jpeg"
              multiple
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </el-form-item>

        <el-form-item
          v-if="formDate.marks[index].payedFlag == 1 && !formDate.marks[index].pbVendorFlag && !formDate.marks[index].directImportFlag && formDate.marks[index].buildVendorNbr!=='382575'"
          class="photo"
          label="上传付款凭证"
          :prop="`marks[${index}].paymentVoucherUrl`"
          :rules="{ required: true, message: '不能为空', trigger: 'change' }"
        >
          <div class="uploadPhoto">
            <div v-for="img in formDate.marks[index].paymentVoucherUrl" :key="img.resourceUrl" class="elImg">
              <el-image :src="img.resourceUrl | transImgUrl" :preview-src-list="formDate.marks[index].paymentVoucherUrl | transUrlName" />
              <div v-if="!isDisabled" class="del" @click="deletePhoto(img,formDate.marks[index].paymentVoucherUrl)">
                <i class="el-icon-delete" />
              </div>
            </div>
            <div v-if="formDate.marks[index].paymentVoucherUrl.length == 0 && isDisabled" class="tips">暂未上传凭证图片</div>
            <el-upload
              v-if="!isDisabled"
              :on-change="(file,fileList)=>{
                handleOnChange(file,formDate.marks[index].paymentVoucherUrl,formDate.marks[index].id,2)
              }"
              :auto-upload="false"
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              accept=".png,.jpg,.jpeg"
              multiple
            >
              <i class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </div>
        </el-form-item>

      </div>
    </el-form>
  </div>
</template>

<script>
import { uploadFile, delFile } from '@/api/coi/onlineTaskAPI/sku'
import postaddress from './fieldPrompt/postaddress.vue'
import bus from '@/utils/eventBus.js'
import { authentication } from '@/utils/processingData.js'

export default {
  name: 'Marks',
  components: { postaddress },
  filters: {
    transUrlName(imgArr) {
      return imgArr.map((e) => authentication(e.resourceUrl))
    },
    transImgUrl(url) {
      return authentication(url)
    }
  },
  props: {
    formDate: {
      type: Object,
      default: () => {
        return {
          marks: []
        }
      }
    },
    isDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postTypeDi: [{ value: 0, label: '未寄样' }, { value: 1, label: '已寄样' }, { value: 2, label: '自送' }, { value: 3, label: '到店捡样' }],
      postType: [{ value: 0, label: '未寄样' }, { value: 1, label: '已寄样' }, { value: 2, label: '自送' }],
      payedFlag: [{ value: 0, label: '未付款' }, { value: 1, label: '已付款' }],
      batchNum: 0
    }
  },
  methods: {
    oneClick() {
      const newObj = JSON.parse(JSON.stringify(this.formDate.marks[0]))
      delete newObj.creationWay
      delete newObj.id
      delete newObj.skuName
      delete newObj.upc
      this.formDate.marks.forEach(element => {
        const item = JSON.parse(JSON.stringify(newObj))
        element = Object.assign(element, item)
      })
    },
    handleOnChange(file, urlList, id, type) {
      var size = file.size / 1024 / 1024
      if (size > 3) {
        this.$message({
          showClose: true,
          message: '图片大小必须小于3M',
          type: 'error'
        })
        return
      }
      this.upload(file, urlList, id, type)
    },
    // 上传文件至服务器
    async upload(file, urlList, id, type) {
      try {
        this.batchNum++
        bus.$emit('loadingChange', true)
        const formData = new FormData()
        formData.append('file', file.raw)
        formData.append('skuId', id)
        formData.append('type', type)
        const result = await uploadFile(formData)
        if (result.code === '0') {
          urlList.push(result.result)
        }
      } finally {
        this.batchNum--
        if (this.batchNum === 0) bus.$emit('loadingChange', false)
      }
    },
    deletePhoto(img, imgList) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { result } = await delFile(img)
        if (result) {
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
          const index = imgList.findIndex((item) => item === img)
          imgList.splice(index, 1)
        } else {
          this.$message({
            message: '删除失败,请稍后重试!',
            type: 'error'
          })
        }
      }).catch(() => {})
    },
    // Remove the rules
    removeRules() {
      this.$refs.ruleForm.resetFields()
      this.tipShow = false
    }
  }
}
</script>

<style scoped lang="scss">
.marks{
  .tip{
    color: #aaa;
    font-size: 14px;
  }
  .goodsList{
    border-bottom: dashed #ccc 1px;
    &:last-child{
      border-bottom: none;
    }
    &:nth-child(n+2){
      margin-top: 10px;
    }
    h2{
      font-size: 14px;
      height: 40px;
      display: flex;
      align-items: center;
      span{
        margin-right: 20px;
      }
    }
  }
}
/deep/ .el-input{
  width: 300px;
}

/deep/ .el-date-editor.el-input{
  width: auto;
}
/deep/ .el-upload--picture-card{
     width: 100px;
     height: 100px;
 }
 /deep/ .el-upload{
     width: 100px;
     height: 100px;
     line-height: 100px;
 }
 /deep/ .el-upload-list--picture-card .el-upload-list__item{
     width: 100px;
     height: 100px;
     line-height: 100px;
 }
 /deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail{
     width: 100px;
     height: 100px;
     line-height: 100px;
 }
 /deep/ .avatar{
     width: 100px;
     height: 100px;
 }
 /deep/ .el-upload--picture-card i{
   font-size: 15px;
 }
 /deep/ .el-upload-list--picture-card{
   display: flex;
   flex-wrap: wrap;
 }
  .uploadPhoto {
    display: flex;
    .elImg {
      margin-right: 5px;
      height: 100px;
      width: 100px;
      display: inline-block;
      position: relative;
      &:hover .del {
        display: block;
        height: 20px;
      }
      .del {
        border-radius: 1px;
        text-align: center;
        display: none;
        width: 100%;
        overflow: hidden;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        cursor: pointer;
        color: #fff;
        line-height: 20px;
        font-size: 12px;
        transition: linear all 0.5s;
      }
      /deep/ .el-image {
        border-radius: 5px;
        height: 100%;
        width: 100%;
      }
    };
    .tips{
      color: #aaa;
    }
  }
  .avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader /deep/.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
i.el-icon-question{
  vertical-align: middle;
  margin-left: 10px;
  cursor: pointer;
  font-size: 16px;
}
</style>
